<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import { EPlatform, platform } from '@onebuy/sdk';
interface IPageHeadWrapProps {
  /** 是否展示顶部navbar */
  showNavBar?: boolean;
  /** 页面标题 */
  title?: string;
  /** 是否展示navbar左侧返回按钮 */
  leftArrow?: boolean;
  /** 是否开启页面下拉刷新 */
  pullRefresh?: boolean;
  /** 下拉刷新提示文案 */
  pullRefreshText?: {
    pullingText?: string;
    loosingText?: string;
    loadingText?: string;
    successText?: string;
  };
  /** 是否开启上拉加载 */
  reachBottom?: boolean;
  /** onReachBottomDistance */
  onReachBottomDistance?: number;
  onScrollRef?: (el: HTMLDivElement) => void;

}
const router = useRouter();
const props = withDefaults(defineProps<IPageHeadWrapProps>(), {
  showNavBar: true,
  title: "",
  leftArrow: true,
  pullRefresh: false,
  pullRefreshText: {
    pullingText: '下拉即可刷新...',
    loosingText: '释放即可刷新...',
    loadingText: '加载中...',
    successText: '刷新成功',
  } as any,
  reachBottom: false,
  onReachBottomDistance: 10
})
/** 下拉刷新,上拉加载回调函数 */
const emit = defineEmits<{
  (event: "refresh", data: () => void): void;
  (event: "reachBottom"): void;
}>();
/** 页面标题 */
const pageHeadTitle = ref<string>(props.title);
/** 下拉刷新状态 */
const pullRefreshLoading = ref<boolean>(false);
onMounted(() => {
  pageHeadTitle.value = pageHeadTitle.value || document.title;
  document.title = pageHeadTitle.value;
})
const showPageHead = computed(() => {
  if ([EPlatform.ALIPAY, EPlatform.UNIONPAY, EPlatform.WECHAT, EPlatform.MINIPROGRAM].includes(platform)) return false;
  return props.showNavBar;
})
const isDisableRefresh = ref<boolean>(false);
const isCanScroll = ref<boolean>(true);
const isReachBottom = ref<boolean>(false);
const goBack = () => router.back();
const onPullRefresh = () => {
  isCanScroll.value = false;
  nextTick(() => {
    emit("refresh", () => {
      pullRefreshLoading.value = false;
      isCanScroll.value = true;
    })
  })
}
const onPullChange = (e: { status: string, distance: number }) => {
  const { status } = e;
  isCanScroll.value = status === 'normal';
}
const onScroll = (e: UIEvent) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement;
  isDisableRefresh.value = !(scrollTop <= 5);
  if (props.reachBottom && scrollTop + clientHeight >= scrollHeight - props.onReachBottomDistance && !isReachBottom.value) {
    isReachBottom.value = true;
    emit("reachBottom");
    nextTick(() => setTimeout(() => {
      isReachBottom.value = false
    }, 1500));
  }
}
</script>

<template>
  <div class="page-header-wrapper">
    <van-nav-bar v-if="showPageHead" :title="pageHeadTitle" :left-arrow="leftArrow" @click-left="goBack">
      <template v-slot:right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
    <div class="page-header-wrapper-content">
      <van-pull-refresh class="content-pull-refresh" :pulling-text="pullRefreshText?.pullingText"
        :loosing-text="pullRefreshText?.loosingText" :loading-text="pullRefreshText?.loadingText"
        :success-text="pullRefreshText?.successText" :disabled="!pullRefresh || isDisableRefresh"
        v-model="pullRefreshLoading" @refresh="onPullRefresh" @change="onPullChange">
        <div :ref="(el: any) => onScrollRef?.(el)" class="content-pull-refresh-inner"
          :class="{ hidden: !isCanScroll }" @scroll="onScroll">
          <slot></slot>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-header-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header-wrapper-content {
    flex: 1;
    height: 0;

    .content-pull-refresh {
      height: 100%;

      .content-pull-refresh-inner {
        height: 100%;
        overflow: auto;
        position: relative;

        &.hidden {
          overflow: hidden;
        }
      }
    }
  }
}
</style>
